<template>
  <svg :style="iconStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
import { CSSProperties } from "vue";

interface SvgProps {
  /**
   * 图标的名称
   */
  name: string;
  /**
   * 图标的前缀
   * @default icon
   */
  prefix?: string;
  /**
   * 图标的样式
   * @default { width: '100px', height: '100px' }
   */
  iconStyle?: CSSProperties;
}

const props = withDefaults(defineProps<SvgProps>(), {
  prefix: "icon",
  iconStyle: () => ({ width: "100px", height: "100px" })
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>
